<template>
  <div id="evaluate" class="evaluate">
    <div @click="pjbtn(1)">
      <i class="iconfont icon-ffan_xingjikongxin"></i>
      <p>不满意</p>
    </div>
    <div @click="pjbtn(2)">
      <i class="iconfont icon-starhollow " v-bind:class="{'icon-ffan_xingjikongxin':this.index=='3'||this.index=='2'}"></i>
      <p>基本满意</p>
    </div>
    <div @click="pjbtn(3)">
      <i class="iconfont icon-starhollow" v-bind:class="{'icon-ffan_xingjikongxin':this.index=='3'}"></i>
      <p>满意</p>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: '3'
    }
  },
  methods: {
    pjbtn(i) {
      if (!this.disabled) {
        this.index = i
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.evaluate {
  margin-top: 10px;
}

.evaluate div {
  text-align: center;
  margin-right: 50px;
  cursor: pointer;
  display: inline-block;
}

.evaluate div i {
  font-size: 42px;
}

.evaluate div p {
  line-height: 30px;
}

.evaluate div i.icon-starhollow {
  color: #dddddd;
}

.evaluate div i.icon-ffan_xingjikongxin {
  color: #ffe500;
}

</style>
